<template>
  <div>
    <el-form ref="queryForm" class="query-form" :model="queryParams" inline>
      <el-form-item class="big-query" label="时间" prop="createDateRange">
        <el-date-picker v-model="queryParams.createDateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleQuery">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
        <el-button type="primary" size="small" @click="handleQuery">导出</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-bottom:10px" size="small" @click="settingShow=true">邀请码配置</el-button>
    <el-table v-loading="listLoading" :data="tableData">
      <el-table-column label="统计日期"
        min-width="160"
        prop="id" />
      <el-table-column label="星期"
        min-width="80"
        prop="name" />
      <el-table-column label="好友奖励发放人数"
        min-width="140"
        prop="pkg_name"/>
      <el-table-column label="好友领取奖励人数"
        min-width="140"
        prop="version"/>
      <el-table-column label="好友首充人数"
        min-width="120"
        prop="version"/>
      <el-table-column label="邀请人奖励发放人数/个数" min-width="200">
        <template slot-scope="scope">
          {{scope.row.id}}/{{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="邀请人奖励领取人数/个数" min-width="200">
        <template slot-scope="scope">
          {{scope.row.id}}/{{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="好友首充总金额"
        min-width="150"
        prop="version"/>
      <el-table-column label="操作"
        width="80"
        fixed="right"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.page_size"
      @pagination="getList" />
    <el-dialog title="邀请码配置"
      :visible.sync="settingShow"
      width="650px"
      :close-on-click-modal="false"
      @closed="onSettingDialogClose">
      <el-form label-width="200px" :model="rewardSetting" :rules="rules" ref="form">
        <el-form-item label="注册奖励时长（邀请人）" prop="invite_reg.duration">
          <el-row>
            <el-col :span="12">
              <el-input-number v-model="rewardSetting.invite_reg.duration" :min="1" :max="99" :precision="0"></el-input-number>
            </el-col>
            <el-col :span="6">
              <el-select v-model="rewardSetting.invite_reg.cell">
                <el-option label="天" :value="2" />
                <el-option label="分钟" :value="1" />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="首充奖励时长（邀请人）" prop="invite_fc.duration">
          <el-row>
            <el-col :span="12">
              <el-input-number v-model="rewardSetting.invite_fc.duration" :min="1" :max="99" :precision="0"></el-input-number>
            </el-col>
            <el-col :span="6">
              <el-select v-model="rewardSetting.invite_fc.cell">
                <el-option label="天" :value="2" />
                <el-option label="分钟" :value="1" />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="注册奖励时长（被邀请人）" prop="invited_reg.duration">
          <el-row>
            <el-col :span="12">
              <el-input-number v-model="rewardSetting.invited_reg.duration" :min="1" :max="99" :precision="0"></el-input-number>
            </el-col>
            <el-col :span="6">
              <el-select v-model="rewardSetting.invited_reg.cell">
                <el-option label="天" :value="2" />
                <el-option label="分钟" :value="1" />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="首充奖励时长（被邀请人）" prop="invited_fc.duration">
          <el-row>
            <el-col :span="12">
              <el-input-number v-model="rewardSetting.invited_fc.duration" :min="1" :max="99" :precision="0"></el-input-number>
            </el-col>
            <el-col :span="6">
              <el-select v-model="rewardSetting.invited_fc.cell">
                <el-option label="天" :value="2" />
                <el-option label="分钟" :value="1" />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmitSet" :loading="saveLoading">确 认</el-button>
        <el-button @click="settingShow = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="详情"
      :visible.sync="detailDialogShow"
      width="650px"
      :close-on-click-modal="false">
      <p style="margin-bottom:20px">统计日期：2022-10-26</p>
      <el-table :data="detailData" border>
        <el-table-column label="权益包" prop="name"></el-table-column>
        <el-table-column label="邀请人领取数（占比）" prop="name"></el-table-column>
        <el-table-column label="邀请人领取数（占比）" prop="name"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { getInviteReward, setInviteReward } from '@/api/invite'
import { experienceList } from '@/api/experience'
export default {
  name: 'InviteManage',
  data () {
    return {
      listLoading: false,
      saveLoading: false,
      settingShow: false,
      detailDialogShow: false,
      queryParams: {
        createDateRange: null,
        page: 1,
        page_size: 20
      },
      rewardSetting: {
        'invite_reg': {
          duration: undefined,
          cell: 2
        },
        'invited_reg': {
          duration: undefined,
          cell: 2
        },
        'invite_fc': {
          duration: undefined,
          cell: 2
        },
        'invited_fc': {
          duration: undefined,
          cell: 2
        }
      },
      tableData: [],
      total: 0,
      detailObj: {},
      detailData: [],
      rules: {
        'invite_reg.duration': [
          { required: true, message: '请输入注册奖励时长（邀请人）', trigger: 'blur' }
        ],
        'invite_fc.duration': [
          { required: true, message: '请输入首充奖励时长（邀请人）', trigger: 'blur' }
        ],
        'invited_reg.duration': [
          { required: true, message: '请输入注册奖励时长（被邀请人）', trigger: 'blur' }
        ],
        'invited_fc.duration': [
          { required: true, message: '请输入首充奖励时长（被邀请人）', trigger: 'blur' }
        ]
      }

    }
  },
  created () {
    getInviteReward({ 'event_name': ['invite_reg', 'invited_reg', 'invite_fc', 'invited_fc'] }).then(res => {
      const list = res.data.list || []
      for (const item of list) {
        if (typeof item === 'object') {
          if (item.cell === 2) {
            item.duration = item.duration / 24 / 60
          }
          this.rewardSetting[item.event_name] = {
            duration: item.duration,
            cell: item.cell
          }
        }
      }
    })
    this.getList()
  },
  methods: {
    handleQuery () {
      this.queryParams.page = 1
      this.getList()
    },
    getList () {
      this.listLoading = true
      experienceList(this.queryParams).then(res => {
        const data = res.data || {}
        this.tableData = (data.list || []).map(item => {
          item.version = item.version.join()
          return item
        })
        this.total = data.count
      }).finally(() => {
        this.listLoading = false
      })
    },
    onSettingDialogClose () {
      this.$refs.form.clearValidate()
    },
    handleDetail (row) {
      this.detailObj = row
      this.detailDialogShow = true
    },
    onSubmitSet () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const arr = []
          Object.keys(this.rewardSetting).forEach(key => {
            const cell = this.rewardSetting[key].cell
            let duration = this.rewardSetting[key].duration
            if (cell === 2) {
              duration = duration * (24 * 60)
            }
            const obj = {
              cell,
              duration,
              event_name: key
            }
            arr.push(obj)
          })
          this.saveLoading = true
          setInviteReward({ list: arr }).then(() => {
            this.$message({
              type: 'success',
              message: '配置成功'
            })
            this.settingShow = false
          }).finally(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
